<template>
  <div class="about">
    <div>
      <Button type="primary" @click="update">更新</Button>
    </div>
    <Table :columns="columns" :data="data" />
  </div>
</template>
<script setup lang="ts">
import { io, Socket } from "socket.io-client";
import { Table, Button } from "cax-ui";
import { reactive, ref } from "vue";
const data = ref([]);
const columns = reactive([
  {
    name: "发起客户端名称",
    key: "name",
    order: 1,
  },
  {
    name: "进程ID",
    key: "pid",
    order: 1,
  },
]);
const socket = io("http://localhost:3000");
socket.connect();
socket.on("connect", () => {
  console.log("链接上了");
});

socket.on("process_list", (ev) => {
  data.value = ev;
});
function update() {
  socket.emit("get_process", 1);
}
</script>
<style lang="less" scoped>
.about {
  padding: 80px;
  box-sizing: border-box;
}
</style>
